<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>课程分类</title>
    <link rel="stylesheet" type="text/css" href="/static/css/admin/bootstrap.css">
    <link rel="stylesheet" href="/static/css/admin/style.css">
    <link rel="stylesheet" type="text/css" href="/static/css/admin/header.css">
    <script type="text/javascript" src="/static/js/admin/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script type="text/javascript" src="/static/js/admin/bootstrap.js"></script>
    <script type="text/javascript" src="/static/js/admin/open_close.js"></script>
    <script type="text/javascript" src="/static/layui/layer/layer.js"></script>
    <style type="text/css">
        table.table tr > td:FIRST-CHILD {
            width: 100px;
        }

        table.table tr > td:LAST-CHILD {
            width: 120px;
        }

        table.table tr > td:LAST-CHILD > * {
            margin: 0 2px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    #include('left.html')
    <div class="overlay"></div>
    <!-- Page Content -->
    <div id="page-content-wrapper">
        <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
            <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>
        </button>
        <div class="container">
            <div data-sid="" class="modal fade" id="sortModal" tabindex="-1" role="dialog" aria-hidden="true"
                 aria-labelledby="myModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">
                                添加学科
                            </h4>
                        </div>
                        <div class="modal-body clearfix">
                            <form @submit.prevent="add_specialties">
                                <input name="medSort" type="text" v-model="specialty.name"
                                       class="form-group form-control"
                                       placeholder="学科名" required="required">
                                <div class="pull-right">
                                    <button data-dismiss="modal" class="btn btn-sm btn-danger">关闭</button>
                                    <button type="submit" class="btn btn-sm btn-info">添加</button>
                                    <!--添加之后要关闭，而且input不能为空-->
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div data-sid="" class="modal fade" id="sortModal2" tabindex="-1" role="dialog" aria-hidden="true"
                 aria-labelledby="myModalLabel2">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel2">
                                添加课程
                            </h4>
                        </div>
                        <div class="modal-body clearfix">
                            <div style="padding: 13px 5px 0;margin: 8px 0" class="pull-left">
                                <span>学科选择：</span>
                                <select id="check" v-model="subject.specialtyId" class="min-select">
                                    <option value="0">学科</option>
                                    <option v-for="(sp, index) in specialties" :index="index" :key="index"
                                            :specialty="sp" :value="sp.id">
                                        {{sp.name}}
                                    </option>
                                </select>
                            </div>
                            <form @submit.prevent="add_subjects">
                                <input name="medSort" type="text" v-model="subject.name" class="form-group form-control"
                                       placeholder="课程名" required="required">
                                <div class="pull-right">
                                    <button data-dismiss="modal" class="btn btn-sm btn-danger">关闭</button>
                                    <button type="submit" class="btn btn-sm btn-info">添加</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div data-sid="" class="modal fade" id="sortModal3" tabindex="-1" role="dialog" aria-hidden="true"
                 aria-labelledby="myModalLabel3">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel3">
                                修改课程信息
                            </h4>
                        </div>
                        <div class="modal-body clearfix">
                            <div style="padding: 13px 5px 0;margin: 8px 0" class="pull-left">
                                <span>重新选择学科：</span>
                                <select id="edit_subject_select" v-model="subject.specialtyId" class="min-select">
                                    <option value="0">学科</option>
                                    <option v-for="(sp, index) in specialties" :index="index" :key="index"
                                            :specialty="sp" :value="sp.id">
                                        {{sp.name}}
                                    </option>
                                </select>
                            </div>
                            <input id="edit_subject_input" name="medSort" type="text" v-model="subject.name"
                                   class="form-group form-control"
                                   required="required">
                            <div class="pull-right">
                                <button data-dismiss="modal" class="btn btn-sm btn-danger">关闭</button>
                                <button id="edit_put3" type="submit" class="btn btn-sm btn-info">添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div data-sid="" class="modal fade" id="sortModal4" tabindex="-1" role="dialog" aria-hidden="true"
                 aria-labelledby="myModalLabel4">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel4">
                                修改学科信息
                            </h4>
                        </div>
                        <div class="modal-body clearfix">
                            <input id="edit_specialty_input" name="medSort" type="text" v-model="specialty.name"
                                   class="form-group form-control"
                                   required="required">
                            <div class="pull-right">
                                <button data-dismiss="modal" class="btn btn-sm btn-danger">关闭</button>
                                <button id="edit_put4" type="submit" class="btn btn-sm btn-info">添加</button>
                                <!--添加之后要关闭，而且input不能为空-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="mainPanle" region="center" border="true">
                <div class="medsort-xcontent">
                    <div>
                        <!-- 页面选项卡标题 -->
                        <div class="col-lg-12 col-xs-12">
                            <h4><span class="fa fa-hand-o-right"></span> 课程分类</h4>
                        </div>
                    </div>
                    <div>
                        <div class="col-lg-6 col-xs-6">
                            <button data-toggle="modal" data-target="#sortModal2"
                                    style="margin: 8px 0; background-color: grey;"
                                    class="btn btn-sm bg-color-x pull-right">添加课程
                            </button>
                            <table class="table table-striped" style="background-color: grey;">
                                <thead class="bg-color-x">
                                <tr>
                                    <td>课程名</td>
                                    <td>所属学科</td>
                                    <td>添加时间</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr is="subject-item" v-for="(sb, index) in subjects" :subject="sb" :index="index"
                                    :add_subjects="add_subjects" :delete_subject="delete_subject"
                                    :edit_subject="edit_subject"
                                    :key="sb.id"></tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-lg-6 col-xs-6">
                            <button data-toggle="modal" data-target="#sortModal"
                                    style="margin: 8px 0; background-color: grey;"
                                    class="btn btn-sm bg-color-x pull-right">添加学科
                            </button>
                            <table class="table table-striped" style="background-color: grey;">
                                <thead class="bg-color-x">
                                <tr>
                                    <td>学科名</td>
                                    <td>添加时间</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr is="specialty-item" v-for="(sp, index) in specialties" :specialty="sp"
                                    :index="index" :add_specialties="add_specialties"
                                    :delete_specialty="delete_specialty"
                                    :edit_specialty="edit_specialty" :key="sp.id"></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->
</div>
<template id="subject-item">
    <tr>
        <td>{{subject.name}}</td>
        <td>{{subject.specialty.name}}</td>
        <td>{{subject.time}}</td>
        <td>
            <button @click="edit_subject(index)" class="btn btn-xs btn-info">修改
            </button>
            <button @click.prevent="delete_subject(index)" class="btn btn-xs btn-danger">删除</button>
        </td>
    </tr>
</template>


<template id="specialty-item">
    <tr>
        <td>{{specialty.name}}</td>
        <td>{{specialty.time}}</td>
        <td>
            <button @click="edit_specialty(index)"
                    class="btn btn-xs btn-info">修改
            </button>
            <!--<button class="btn btn-xs btn-info">修改</button>-->
            <button @click.prevent="delete_specialty(index)" class="btn btn-xs btn-danger">删除</button>

        </td>
    </tr>
</template>
<script>
    var CTVM = new Vue({
        el: '#page-content-wrapper',
        data: {
            specialty: {},
            specialties: [],
            subjects: [],
            subject: {specialtyId: 0},
        },
        methods: {
            add_specialties: function () {
                $.post('/course/type/specialty/add', this.specialty, function (data) {
                    if (data.success) {
                        // console.log("学科添加成功");
                        $("#sortModal").modal('hide');
                        layer.msg('学科添加成功', {icon: 6});
                        $.post('/course/type/specialty/page', function (data1) {
                            if (data1.success) {
                                CTVM.specialties = [];
                                CTVM.specialties = data1.payload.rows;
                            }
                        });
                    } else {
                        layer.msg("学科添加失败", {icon: 5});
                    }
                    $('.modal-backdrop').remove();
                });
            },
            add_subjects: function () {
                if ($('#check option:selected').val() == 0) {//不能使仨等于号
                    layer.msg('请选择相应学科！', {icon: 6});
                    return false;
                }
                $.post('/course/type/subject/add', this.subject, function (data) {
                    if (data.success) {
                        // console.log("课程添加成功");
                        $("#sortModal2").modal('hide');
                        layer.msg("课程添加成功", {icon: 6});
                        $.post('/course/type/subject/page', function (data) {
                            if (data.success) {
                                CTVM.subjects = [];
                                CTVM.subjects = data.payload.rows;
                            }
                        });
                    } else {
                        layer.msg("暂无学科,请先添加学科!", {icon: 5});
                    }
                    $('.modal-backdrop').remove();
                });
            },
            edit_subject: function (index) {
                var self = this;
                var index_ = index;
                $('#edit_subject_input').attr("placeholder", self.subjects[index].name);
                $('#sortModal3').modal('show');
                $('#edit_put3').click(function () {
                    if ($('#edit_subject_select option:selected').val() == 0) {//不能使仨等于号
                        layer.msg('请选择相应学科！', {icon: 6});
                        return false;
                    }
                    $.post('/course/type/subject/change', {
                        specialtyId: $('#edit_subject_select option:selected').val(),
                        name: $('#edit_subject_input').val(),
                        id: self.subjects[index_].id
                    }, function (data) {
                        if (data.success) {
                            $.post('/course/type/subject/page', function (data1) {
                                if (data1.success) {
                                    CTVM.subjects = [];
                                    CTVM.subjects = data1.payload.rows;
                                }
                            });
                            layer.msg('修改课程成功！', {icon: 6});
                        } else
                            layer.msg('修改课程失败！', {icon: 5});
                        $('#sortModal3').modal('hide');
                        $('.modal-backdrop').remove();
                    })
                });
            },
            edit_specialty: function (index) {
                var self = this;
                var index_ = index;
                $('#edit_specialty_input').attr("placeholder", self.specialties[index].name);
                $('#sortModal4').modal('show');
                $('#edit_put4').click(function () {
                    $.post('/course/type/specialty/change', {
                        name: $('#edit_specialty_input').val(),
                        id: self.specialties[index_].id
                    }, function (data) {
                        if (data.success) {
                            $.post('/course/type/specialty/page', function (data1) {
                                if (data1.success) {
                                    CTVM.specialties = [];
                                    CTVM.specialties = data1.payload.rows;
                                }
                            });
                            layer.msg('修改学科成功！', {icon: 6});
                        } else
                            layer.msg('修改学科失败！', {icon: 5});
                        $('#sortModal4').modal('hide');
                        $('.modal-backdrop').remove();
                    })
                });

            },
            delete_specialty: function (index) {
                var self = this;
                var specialty = self.specialties[index];
                layer.open({
                    title: '删除',
                    btn: ['确认', '取消'],
                    content: '是否删除学科为 <h4>' + specialty.name + '</h4> 的信息？',
                    yes: function (i) {
                        $.post('/course/type/specialty/delete', {specialtyId: specialty.id}, function (data) {
                            if (data.success) {
                                self.$root.specialties.splice(index, 1);
                                layer.msg('删除成功', {icon: 6});
                            } else {
                                layer.msg('删除失败，请检查该学科中是否包含课程！', {icon: 5});
                            }
                        });
                        layer.close(i);
                    }
                });
            },
            delete_subject: function (index) {
                var self = this;
                var subject = self.subjects[index];
                layer.open({
                    title: '删除',
                    btn: ['确认', '取消'],
                    content: '是否删除课程为 <h4>' + subject.name + '</h4> 的信息？',
                    yes: function (i) {
                        $.post('/course/type/subject/delete', {subjectId: subject.id}, function (data) {
                            if (data.success) {
                                self.$root.subjects.splice(index, 1);
                                layer.msg('删除成功', {icon: 6});
                            } else {
                                layer.msg('删除失败，请检查该课程中是否包含有已经发布的视频课程！', {icon: 5});
                            }
                        });
                        layer.close(i);
                    }
                });
            }
        },
        created: function () {
            $.post('/course/type/subject/page', function (data) {
                if (data.success) {
                    CTVM.subjects = [];
                    CTVM.subjects = data.payload.rows;
                }
            });
            $.post('/course/type/specialty/page', function (data1) {
                if (data1.success) {
                    CTVM.specialties = [];
                    CTVM.specialties = data1.payload.rows;
                }
            });
        },
        components: {
            'subject-item': {
                props: ['subject', 'add_subjects', 'delete_subject', 'edit_subject', 'index'],
                template: '#subject-item'
            },
            'specialty-item': {
                props: ['specialty', 'add_specialties', 'delete_specialty', 'edit_specialty', 'index'],
                template: '#specialty-item'
            }
        }
    });
</script>
</body>
</html>